<!--
 * @Description: 
 * @Date: 2022-02-12 10:51:54
 * @LastEditTime: 2022-04-14 14:41:15
 * @FilePath: /vue3-element-plus/src/views/components/input-number/index.vue
 * @Author: Devin
-->
<template>
  <div class="components">
    <div class="left">
      <el-card id="普通数字输入框">
        <template #header>
          <div class="el-card-header">普通数字输入框</div>
          <div class="el-card-header-tip">自动失去焦点去除首位空格</div>
        </template>
        <CcInputNumber v-model="data" />
        <Code><div v-html="code1"></div></Code>
      </el-card>
      <el-card id="带icon的数字输入框">
        <template #header>
          <div class="el-card-header">带 icon 的数字输入框</div>
          <div class="el-card-header-tip">
            要在输入框中添加图标，你可以简单地使用 prefix-icon 和 suffix-icon 属性，目前仅支持Font class类型的图标
          </div>
        </template>
        <CcInputNumber v-model="data" prefix-icon="iconfont cc-yuan" class="marginR20" />
        <CcInputNumber v-model="data" suffix-icon="iconfont cc-baifenhao" class="marginR20" />
        <CcInputNumber
          v-model="data"
          prefix-icon="iconfont cc-yuan"
          suffix-icon="iconfont cc-baifenhao"
          class="marginR20"
        />
        <CcInputNumber v-model="data" controls-position="right" prefix-icon="iconfont cc-yuan" class="marginR20" />
        <CcInputNumber
          v-model="data"
          controls-position="right"
          suffix-icon="iconfont cc-baifenhao"
          class="marginR20"
        />
        <CcInputNumber
          v-model="data"
          controls-position="right"
          prefix-icon="iconfont cc-yuan"
          suffix-icon="iconfont cc-baifenhao"
          class="marginR20"
        />
        <Code><div v-html="code2"></div></Code>
      </el-card>
      <el-card id="使用插槽设置icon">
        <template #header>
          <div class="el-card-header">使用插槽设置icon</div>
          <div class="el-card-header-tip">prefix 和 suffix 命名的插槽。</div>
        </template>
        <CcInputNumber v-model="data" class="marginR20">
          <template #prefix>$</template>
        </CcInputNumber>
        <CcInputNumber v-model="data" class="marginR20">
          <template #suffix>%</template>
        </CcInputNumber>
        <CcInputNumber v-model="data" class="marginR20">
          <template #prefix>$</template>
          <template #suffix>%</template>
        </CcInputNumber>
        <CcInputNumber v-model="data" controls-position="right" class="marginR20">
          <template #prefix>$</template>
        </CcInputNumber>
        <CcInputNumber v-model="data" controls-position="right" class="marginR20">
          <template #suffix>%</template>
        </CcInputNumber>
        <CcInputNumber v-model="data" controls-position="right">
          <template #prefix>$</template>
          <template #suffix>%</template>
        </CcInputNumber>

        <Code><div v-html="code3"></div></Code>
      </el-card>
    </div>
    <div class="right"><CcAnchor :sections="sections" :offset="120" width="150px"> </CcAnchor></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from '@vue/runtime-core';
import code from './code';
export default defineComponent({
  name: '',
  components: {},
  setup() {
    const state = reactive({
      data: '',
      ...code,
      sections: [{ label: '普通数字输入框' }, { label: '带icon的数字输入框' }, { label: '使用插槽设置icon' }]
    });
    return { ...toRefs(state) };
  }
});
</script>
<style scoped lang="scss"></style>
